<template>
  <div class="butt-list-sty">
    <div
      v-for="(item, index) in buttonselectlist"
      :key="index"
      class="basebut2"
      :class="index === itemtypeactive ? 'basebut1' : ''"
      :style="{
        width:(100 / buttonselectlist.length) + '%'
      }"
      @click="itemtypeactive = index"
    >{{ item.itemTypeName }}</div>
  </div>
</template>s
<script>
// import Process from "@/api/agricultural-work-management/agricultural-task-processing"
export default {
  data() {
    return {
      itemtypeactive: 0,
      buttonselectlist: [
        { itemTypeId: 0, itemType: '全场', itemTypeName: "全场分布" },
        { itemTypeId: 1, itemType: '保种群', itemTypeName: "保种群分布" },
        { itemTypeId: 2, itemType: '育种群', itemTypeName: "育种群分布" }
      ]
    };
  },
  watch: {
    itemtypeactive(newvalue) {
      this.setfarmtypeid(newvalue);
    }
  },
  mounted() {
    this.setfarmtypeid(0);
    this.ProcessList();
  },
  methods: {
    ProcessList() {
    },
    setfarmtypeid(i) {
      this.$emit("topitemtype", this.buttonselectlist[i]["itemType"]);
    }
  }
};
</script>
<style lang="scss" scoped>
.butt-list-sty {
  width: 100%;
  height: 36px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  border: #e8e8e8 1px solid;
  color: #5a5a5a;
  font-weight: bold;

}

.basebut2 {
  width: 130px;
  height: 36px;
  line-height: 36px;
  // border-radius: 20px;
  // margin-right: 30px;
  font-size: 16px;
  text-align: center;
  background-color: #f8f8f8;
  // border: #6ecae3 1px solid;
  cursor: pointer;
  &:not(:last-child) {
    //  border-right: #6ecae3 1px solid;
    border: #e8e8e8 1px solid;
  }
}
.basebut1 {
  // background-image: -ms-linear-gradient(
  //   bottom,
  //   rgb(35, 181, 235),
  //   rgb(28, 148, 192),
  //   rgb(35, 181, 235)
  // );
  // background-image: -moz-linear-gradient(
  //   bottom,
  //   rgb(35, 181, 235),
  //   rgb(28, 148, 192),
  //   rgb(35, 181, 235)
  // );
  // background-image: -webkit-linear-gradient(
  //   bottom,
  //   rgb(35, 181, 235),
  //   rgb(28, 148, 192),
  //   rgb(35, 181, 235)
  // );
  // background-image: -o-linear-gradient(
  //   bottom,
  //   rgb(35, 181, 235),
  //   rgb(28, 148, 192),
  //   rgb(35, 181, 235)
  // );
  // background-image: linear-gradient(
  //   to bottom,
  //   rgb(35, 181, 235),
  //   rgb(28, 148, 192),
  //   rgb(35, 181, 235)
  // );
  border: #376ea4 1px solid !important;
  color: #376ea4;
  border-radius: 2px;
  transform: scale(1.2);

}
</style>
